<template>
	<view class="flex-1 hb column hidden">
		<view class="bgf mt14 pt29 pb39">
			<view class="w-calc-30 esay-out1">
				<view class="input-ctn">
					<view class="justify-start align-center" @click="navTo('pages/find-car/city', { brand: 1 })">
						<text class="mr12 pb5">{{ cityInfor.name }}</text>
						<view class="icon-down"></view>
					</view>
					<u-line direction="col" length="31rpx" color="#C2C2C2" margin="0 18rpx 0 13rpx"></u-line>
					<u-icon name="search" size="40rpx" color="#0759BB" bold></u-icon>
					<view class="flex-1 ml15">
						<input
							class="w100 input-css"
							v-model="queryParams.keywords"
							placeholder="输入你要找的车"
							type="text"
							confirm-type="search"
							@confirm="handleSearch"
							placeholder-class="holder"
						/>
					</view>
				</view>
			</view>
			<view class="mt14 esay-out2">
				<u-tabs
					:list="tabs"
					@click="handleTabs"
					lineWidth="40rpx"
					keyName="label"
					lineColor="#0759BB"
					:scrollable="false"
					lineHeight="3rpx"
					:activeStyle="{
						color: '#0759BB',
						fontWeight: 'bold',
						fontSize: '28rpx',
						transform: 'scale(1.05)'
					}"
					:inactiveStyle="{
						color: '#000000',
						fontSize: '28rpx',
						transform: 'scale(1)'
					}"
					itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
				></u-tabs>
			</view>
		</view>
		<view class="flex-1 hb column hidden bgf">
			<scroll-view
				class="hb plr30"
				:scroll-y="true"
				:refresher-enabled="scrollViewTool.isEnabled"
				:refresher-triggered="scrollViewTool.triggered"
				refresher-background="rgba(0,0,0,0)"
				@refresherrefresh="pullDownRefresh"
				@refresherrestore="scrollViewTool.triggered = false"
				:upper-threshold="100"
				:lower-threshold="100"
				@refresherabort="triggered = false"
				@scrolltolower="reachBottom"
			>
				<!-- 车源 -->
				<template v-if="listData.length > 0">
					<view v-for="(item, index) in listData" :key="item.id">
						<view v-if="item.type == 4" @click="handleDetail(item, 1)">
							<view class="good-item esay-out2">
								<view class="relative">
									<u-image :src="item.images[0]" width="220rpx" height="164rpx" radius="10rpx" />
									<view class="tag tag-cy">车源</view>
								</view>
								<view class="ml24 flex-1">
									<view class="name">{{ item.name }}</view>
									<view class="time">{{ item.on_plate_time }}/{{ item.mileage }}万公里</view>
									<view class="price">{{ item.price }}万</view>
									<view class="bottom">
										<view class="left">
											<view class="point">
												<u-image
													src="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/home/map.png"
													width="18rpx"
													height="23rpx"
												></u-image>
												<view class="text">{{ item.province }}</view>
											</view>
											<view class="date">{{ item.on_plate_time }}</view>
										</view>
										<view class="right">最高出价</view>
										
									</view>
									
								</view>
							</view>
							<u-line color="#EDEDED" margin="31rpx 0"></u-line>
						</view>

						<!-- 批发 -->
						<view class="esay-out3" v-else>
							<view class="item-ctn">
								<view class="top">
									<u-avatar :src="item.user.head_img" @click="navTo('pages/user/home/home')"></u-avatar>
									<view class="center-box" @click="navTo('pages/user/home/home')">

										<view class="nt">
											<text class="name">{{ item.user.nickname }}</text>
											<view class="tag " :class="item.type==1?'tag-yellow':'tag-red'">{{ typeValue[item.type] }}</view>
										</view>
										<view class="time">{{ item.create_time_txt }}</view>
									</view>
									<view class="phone" @click.stop="handleCallTell(item.user.phone)">电话联系</view>
								</view>
							</view>
							<view class="content">
								<view class="title">{{ item.name }}</view>
								<view class="sub-title">
									{{ item.desc }}
								</view>
							</view>
							<view class="justify-start align-center gap21 mt26">
								<u-image
									:src="v"
									width="216rpx"
									height="216rpx"
									radius="18rpx"
									v-for="(v,vi) in item.images"
									:key="vi"
								></u-image>
							</view>
							<view class="mt31 justify-between">
								<view class="center ml17">
									<image
										src="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/home/loc-ic.png"
										style="width: 18rpx; height: 23rpx"
									></image>
									<text class="base-color fs26 ml6">{{ item.province }}</text>
								</view>
								<view class="funcs">
									<view class="func"
										@click.stop="savePhotos('https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/square/down-img.png')">
										<u-image src="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/square/down-img.png" width="40rpx"
											height="40rpx"></u-image>
										<text>下载图片</text>
									</view>
									<view class="func">
										<u-image
											src="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/square/secret-chat.png"
											width="40rpx"
											height="40rpx"
										></u-image>
										<text>私聊</text>
									</view>
									<view class="func">
										<u-image
											src="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/square/deposit.png"
											width="40rpx"
											height="40rpx"
										></u-image>
										<text>定金</text>
									</view>
								</view>
							</view>
							<u-line color="#EDEDED" margin="31rpx 0"></u-line>
						</view>
					</view>
					<u-loadmore :status="loadStatus" />
				</template>
			</scroll-view>
		</view>
		<view class="">
			<!-- part-发布组件 -->
			<releasePopup v-model:show="showRelease" />
			<!-- part-悬浮按钮 -->
			<fabButton
				bg="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/home/add.png"
				bgWidth="90rpx"
				bgHeight="90rpx"
				@click="showRelease = true"
			/>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { savePhotos, navTo, showModel } from '@/core/app';
import releasePopup from '@/components/release-popup/release-popup.vue';
import fabButton from '@/components/fab-buttom/fab-buttom.vue';
import { getCarSource, track } from '@/api/square.js';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { useLoadPageList } from '@/hooks/useLoadPageList/useLoadPageList.js';
const queryParams = ref({
	keywords: '',
	city_id: '',
	province_id: '',
	type: 0 //1求购 2收购 3批发 4车源  0所有
});
const typeValue = {
	1: '求购',
	2: '收购',
	3: '批发'
};
const { listData, listDataDelay, loadStatus, scrollViewTool, reachBottom, pullDownRefresh, reSetList } =
	useLoadPageList(getCarSource, queryParams.value);
onLoad(() => {
	reSetList();
});
const cityInfor = ref({ name: '全国' });
onShow(() => {
	//城市
	uni.$once('changeCity', (data) => {
		cityInfor.value = JSON.parse(data.brand);
		queryParams.value.province_id = cityInfor.value.province_id;
		reSetList();
	});
});
const handleDetail = async (item, type) => {
	await track({ type: item.type, item_id: item.id });
	navTo('pages/release/vehicle/detail', { id: item.id });
};
//切换分类
const handleTabs = (item) => {
	queryParams.value.type = item.type;
	reSetList();
};
//搜索
const handleSearch = (e) => {
	queryParams.value.keywords = e.detail.value;
	reSetList();
};

//拨打电话
const handleCallTell = (tell) => {
	showModel({
		content: '请确认是否拨打电话?',
		confirm: async () => {
			uni.makePhoneCall({
				phoneNumber: tell
			});
		}
	});
};
/* 发布组件控制 */
const showRelease = ref(false);
const tabs = ref([
	{
		label: '全部',
		value: '',
		type: 0
	},
	{
		label: '车源',
		value: 'car',
		type: 4
	},
	{
		label: '批发',
		value: 'batch',
		type: 3
	},
	{
		label: '求购',
		value: 'qiugou',
		type: 1
	},
	{
		label: '收购',
		value: 'shougou',
		type: 2
	}
]);
</script>

<style scoped lang="scss">
.input-ctn {
	width: 100%;
	height: 73rpx;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	border: 2rpx solid #0759bb;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 0 16rpx;
	box-sizing: border-box;

	.input-css {
		font-weight: 400;
		font-size: 26rpx;
	}

	.holder {
		font-weight: 400;
		font-size: 26rpx;
		color: #bdbcba;
	}
}

.good-item {
	display: flex;
	justify-content: flex-start;
	align-items: center;

	.tag {
		position: absolute;
		top: 0;
		left: 0;
		background: #f9de49;
		border-radius: 10rpx 0rpx 10rpx 0rpx;
		width: 122rpx;
		height: 35rpx;
		padding: 4rpx 10rpx 3rpx 11rpx;
		box-sizing: border-box;
		font-weight: 500;
		font-size: 20rpx;
		color: #000000;
	}
	.tag-cy{
		width: initial;
		background-color: rgb(121,191,96);
		color:#fff;
	}

	.name {
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}

	.time {
		font-weight: 400;
		font-size: 24rpx;
		color: #606060;
		margin-top: 6rpx;
		text-align: left;
	}

	.price {
		font-weight: 600;
		font-size: 30rpx;
		color: #d74b34;
		text-align: right;
	}

	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;

		.left {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-weight: 400;
			font-size: 24rpx;
			color: #606060;

			.point {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-weight: 400;
				font-size: 24rpx;
				color: #606060;

				.text {
					margin-left: 6rpx;
				}
			}

			.date {
				font-weight: 400;
				font-size: 24rpx;
				margin-left: 17rpx;
			}
		}

		.right {
			padding-bottom: 3rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #606060;
		}
	}
}

.item-ctn {
	.top {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.center-box {
			margin-left: 19rpx;
			flex: 1;

			.nt {
				width: 100%;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.tag {
					width: 64rpx;
					height: 31rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: bold;
					font-size: 22rpx;
					color: #ffffff;
					border-radius: 5rpx;
					margin-left: 8rpx;
				}

				.tag-red {
					background-color: #d74d35;
				}

				.tag-yellow {
					background-color: #f9d03c;
				}
			}

			.time {
				margin-top: 11rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #5b5b5b;
			}
		}

		.phone {
			width: 112rpx;
			height: 48rpx;
			background: rgba(73, 133, 205, 0.2);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 1rpx solid #0759bb;
			font-weight: 400;
			font-size: 23rpx;
			color: #0759bb;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}

.content {
	padding: 0 7rpx;
	box-sizing: border-box;
	margin-top: 18rpx;

	.title {
		font-weight: bold;
		font-size: 30rpx;
		color: #000000;
	}

	.sub-title {
		margin-top: 13rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
	}
}

.funcs {
	display: flex;
	justify-content: flex-end;
	align-items: center;

	.func {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: 400;
		font-size: 22rpx;
		color: #666666;
		margin-left: 54rpx;
		gap: 5rpx;
	}
}
</style>
